@import 'variables';

@each $colorKey, $color in ($colors) {
  .text-#{$colorKey} {
    color: $color;
  }

  .bg-#{$colorKey} {
    background-color: $color;
  }

  .bc-#{$colorKey} {
    border-color: $color;
  }
}

// text
@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var !important;
  }
}

// text overflow
.text-ellipsis {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@each $sizeKey, $size in $font-sizes {
  .fs-#{$sizeKey} {
    font-size: $size * $base-font-size;
  }

  .lh-#{$sizeKey} {
    line-height: $size * $base-font-size;
  }
}

// border-radius
@each $sizeKey, $size in $border-radius-sizes {
  .br-#{$sizeKey} {
    border-radius: $size * $base-font-size;
  }

  @each $colorKey, $color in ($colors) {
    @each $directionKey, $direction in ($spacing-directions) {
      .b-#{$directionKey}-#{$colorKey}-#{$sizeKey} {
        border-#{$direction}: $size * $base-font-size solid $color;
      }
    }

    .b-#{$colorKey}-#{$sizeKey} {
      border: $size * $base-font-size solid $color;
    }
  }
}

.br-50 {
  border-radius: 50%;
}

// flex
.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

@each $key, $value in $flex-jc {
  .jc-#{$key} {
    justify-content: $value !important;
  }
}

@each $key, $value in $flex-ai {
  .jc-#{$key} {
    align-items: $value !important;
  }
}

.flex-1 {
  flex: 1;
}

.flex-grow-1 {
  flex-grow: 1;
}

@each $typeKey, $type in $spacing-types {
  // .m-1
  @each $sizeKey, $size in $spacing-sizes {
    .#{$typeKey}-#{$sizeKey} {
      #{$type}: $size * $spacing-base-size;
    }
  }

  // .mx-1 .my-1
  @each $sizeKey, $size in $spacing-sizes {
    .#{$typeKey}x-#{$sizeKey} {
      #{$type}-left: $size * $spacing-base-size;
      #{$type}-right: $size * $spacing-base-size;
    }

    .#{$typeKey}y-#{$sizeKey} {
      #{$type}-top: $size * $spacing-base-size;
      #{$type}-bottom: $size * $spacing-base-size;
    }
  }

  // .mt-1
  @each $directionKey, $direction in $spacing-directions {
    @each $sizeKey, $size in $spacing-sizes {
      .#{$typeKey}#{$directionKey}-#{$sizeKey} {
        #{$type}-#{$direction}: $size * $spacing-base-size;
      }
    }
  }
}

// width, height

@function buildWidthLayout($num: 100) {
  $map: (
    defaultValue: 0
  ); //不能直接生成col，需要设置一个默认值
  $rate: percentage(1 / $num); //均分并取百分数
  @for $i from 1 through $num {
    //1为起始值，5为终止值遍历生成
    $tmpMap: (w-#{$i}: $rate * $i); //定义好key和value
    $map: map-merge($map, $tmpMap); //写入新的map
  }
  $map: map-remove($map, defaultValue); //删除默认值
  @return $map; //返回新的map
}
@mixin buildWidthLayout($num: 5) {
  $map: buildWidthLayout($num);
  @each $key, $value in $map {
    .#{$key} {
      width: $value !important;
    }
  }
}
@include buildWidthLayout(100);
@function buildHeightLayout($num: 100) {
  $map: (
    defaultValue: 0
  ); //不能直接生成col，需要设置一个默认值
  $rate: percentage(1 / $num); //均分并取百分数
  @for $i from 1 through $num {
    //1为起始值，5为终止值遍历生成
    $tmpMap: (h-#{$i}: $rate * $i); //定义好key和value
    $map: map-merge($map, $tmpMap); //写入新的map
  }
  $map: map-remove($map, defaultValue); //删除默认值
  @return $map; //返回新的map
}
@mixin buildHeightLayout($num: 5) {
  $map: buildHeightLayout($num);
  @each $key, $value in $map {
    .#{$key} {
      height: $value !important;
    }
  }
}
@include buildHeightLayout(100);
